<template>
  <div class="group">
    <div class="more" v-if="instance.has_next" @click="() => instance.getPage(true)">
      获取更多
    </div>
    <div style="height: 10px"></div>
    <template v-for="(item, index) in instance.list" :key="item.id">
      <div :class="item.isSelf ? 'self_message flex' : 'flex'">
        <div>
          <ElImage class="avatar" :src="item.User?.fullUrl" alt="头像"></ElImage>
        </div>
        <div style="width: 20px"></div>
        <div style="max-width: 50%">
          <div class="nickname">{{ item.User?.nickname }}</div>
          <el-popover trigger="contextmenu" v-model="item.show">
            <div @click="item.show = false">
              <template v-for="(it, prop) in instance.controls" :key="prop">
                <component v-if="it.show(item)" :is="it.formatter(item, index)"></component>
              </template>
            </div>
            <template #reference>
              <Message :messages="instance.messages" :item="item"></Message>
            </template>
          </el-popover>
        </div>
      </div>
    </template>
    <div style="
        font-size: 0.8em;
        text-align: right;
        color: var(--el-color-primary);
      ">
      <template v-if="instance.notReadUser?.length">{{ instance.notReadUser }} 未读</template>
      <span v-else style="color: var(--el-text-color-secondary)">全部已读</span>
    </div>
  </div>
  <div style="
      border-bottom: 1px solid var(--el-border-color);
      height: 10px;
      margin-bottom: 4px;
    "></div>
  <div style="padding: 2px 12px; display: flex">
    <template v-for="(item, prop) in instance.menus" :key="prop">
      <component :is="item.formatter()"></component>
    </template>
  </div>
  <div style="
      display: flex;
      align-items: flex-end;
      background-color: var(--el-bg-color);
      padding: 12px 4px;
    " id="groupInput">
    <ElInput type="textarea" :placeholder="instance.placeholder" :model-value="instance.message"
      @input="(msg) => instance.messageChange(msg)" :rows="4" resize="none" :maxlength="400" show-word-limit
      @keydown.enter="() => instance.sendMessage()">
    </ElInput>
    <div style="width: 20px"></div>
    <ElButton type="primary" @click="() => instance.sendMessage()">发送</ElButton>
  </div>
  <div v-if="instance.newMessage" class="newMessage" @click="() => instance.scrollIntoBottom()">
    {{ instance.newMessage }}条新消息
  </div>
</template>

<script setup lang="ts">
import { ElInput, ElButton, ElImage, ElPopover } from "element-plus";
import { GroupForm } from "@b/model/base/form";
import { onUnmounted, onMounted } from "vue";
import Message from "./components/group_message.vue";
import { NotiStore } from "@b/model/store/notification";

interface prop {
  instance: GroupForm;
}

const { instance } = defineProps<prop>();

(async () => {
  await instance.getPage();
  new NotiStore().getGroupList();
  instance.getNewMessage();
  instance.scrollIntoBottom();
})();
onMounted(() => {
  document.getElementById('scroll')?.addEventListener('scroll', instance.checkedScrollBottom.bind(instance))
});
onUnmounted(() => {
  clearTimeout(instance.timer);
  document.getElementById('scroll')?.removeEventListener('scroll', instance.checkedScrollBottom.bind(instance))
});
</script>

<style scoped>
.group {
  min-height: 600px;
  background-color: var(--el-bg-color);
  padding: 10px;
  border-radius: 6px;
}

.self_message .nickname {
  text-align: right;
}

.message_img {
  width: 100px;
  height: 100px;
}

.message_delete {
  font-size: 0.8em;
  color: var(--el-text-color-secondary);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.flex {
  display: flex;
  margin-bottom: 20px;
}

.self_message {
  flex-direction: row-reverse;
}

.nickname {
  margin-bottom: 6px;
}

.message_img {
  width: 100px;
  height: 100px;
}

.more {
  color: var(--el-text-color-secondary);
  font-size: 0.85em;
  text-align: center;
  cursor: pointer;
}

.newMessage {
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  background-color: var(--el-bg-color);
}
</style>
